<template>
  <div class="ont-btn-care-wrapper">
    <div class="title">发放优惠券</div>
      <el-form :model="magicForm" ref="magicForm" label-width="100px" class="magic-form" size="mini">
        <el-form-item label="优惠券:">
          <coupon-template class="coupon-template" :info="couponInfo"></coupon-template>
        </el-form-item>
        <el-form-item label="会员总人数:">
          <span class="people-num">{{peopleNum}} 人</span>
        </el-form-item>
        <el-form-item label="关怀类型:">
          <div class="radio-btn-group g-flex-row">
            <div class="radio-btn" :class="{'radio-btn-selected':labelType===index}" v-for="(item,index) in labelList" :key="index" @click="labelType=index">{{item.type}}</div>
          </div>
        </el-form-item>
        <el-form-item label="关怀内容:">
          <span class="text">{{labelList[labelType].content}}</span>
        </el-form-item>
      </el-form>
      <div class="btn-coupon-box">
        <el-button type="primary" @click="submit" class="btn-coupon">一键发券</el-button>
      </div>
  </div>
</template>
<script>
import CouponTemplate from '../../components/coupon/template'
import { predictUserNum, defaultCoupon, getCareTypeApi, confirmCareApi, oneBtnCareApi } from '@/api/marketShop'
import { mapGetters } from 'vuex'
export default {
  name:'oneBtnCare',
  components:{
    CouponTemplate
  },
  data(){
    return {
      magicForm:{},
      couponInfo: {},
      peopleNum: 0,
      labelList:[
        {type: '限时福利',content:'5元优惠券到账！限时领取使用'},
        {type: '节日福利',content:'送您5元优惠券，祝您节日快乐'},
        {type: '特惠福利',content:'特惠福利！加油100元减5元'}
      ],
      labelType: 0
    }
  },
  computed:{
    ...mapGetters(['gasInfo'])
  },
  created(){
    this.initPage()
  },
  methods:{
    initPage(){
      this.defaultCouponApi()
      this.predictUserNumApi(this.gasInfo.gasId)
      this.getCareOptions()
    },
    submit(){
      let params = {
        gasId:this.gasInfo.gasId,
        activeType: 5
      }
      this.confirmCare(params)
    },
    confirmTips(msg){
      this.$confirm( msg, '确认发放', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.oneBtnCare()
        }).catch(()=>{})
    },
    // 获取预计人数
    async predictUserNumApi (gasId) {
      try {
        const { code, result } = await predictUserNum({ gasId, activeType: 5 })
        if (code !== 200) return
        this.peopleNum = result
      } catch (e) {
        console.log(e)
      }
    },
    // 获取默认优惠券
    async defaultCouponApi () {
      try {
        const {code, result = {}} = await defaultCoupon()
        if (code !== 200) return
        const { couponConditionMoney, couponMoney, couponTitle, expireDateInterval } = result[5][0]
        this.couponInfo = { couponConditionMoney, couponMoney, couponTitle, expireDateInterval }
      } catch (e) {
        console.log(e)
      }
    },
    // 获取会员关怀类型
    async getCareOptions(){
      try{
        const {code, result = []} = await getCareTypeApi()
        if (code !== 200) return
        this.labelList = result
      }catch(e){
        console.log(e)
      }
    },
    // 发起确认
    async confirmCare(data){
      try{
        const {code, result} = await confirmCareApi(data)
        if (code !== 200) return
        const {canCreate,message} = result
        if(canCreate){
          this.confirmTips(message)
        }else{
          this.$message.warning(message)
        }
      }catch(e){
        console.log(e)
      }
    },
    // 一键关怀
    async oneBtnCare(){
      try{
        let data = {
          gasId:this.gasInfo.gasId,
          type: this.labelList[this.labelType].type,
          content: this.labelList[this.labelType].content
        }
        const {code} = await oneBtnCareApi(data)
        if (code !== 200) return
        this.gotoSuccess()
      }catch(e){
        console.log(e)
      }
    },
    gotoSuccess(){
      this.$router.push({ path: '/marketCenter/activitySuccess',query:{isLoading: true} })
    }
  }    
}
</script>
<style lang="less" scoped>
.ont-btn-care-wrapper{
  background: #ffffff;
  padding: 30px 30px;
  .title{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #222222;
    margin-bottom: 10px;
  }
  .coupon-template{
    width: 321px;
    height: 136px;
  }
  .people-num{
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4765F9;
  }
  .btn-coupon-box{
    padding-left: 20px;
    .btn-coupon{
      width: 216px;
      height: 48px;
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      background: #4B7EFE;
    }
  }
  .radio-btn{
    width: 100px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #D8D8D8;
    font-size: 14px;
    color: #666666;
    margin-right: 10px;
    text-align: center;
  }
  .radio-btn-selected{
    border: 1px solid #4765F9;
    color: #4765F9;
  }
}
</style>